<template>
  <n-config-provider :theme="darkTheme">

  <div class="page">
    <div :style="{width: skyMapWidth + 'px', height: skyMapWidth + 'px'}" class="left">
      <skymap :scale="scale" :time="time" :setting="setting" :width="skyMapWidth" />
      <NButton class="settingButton" quaternary @click="showSetting = true">
        <template #icon>
          <Icon size="1.3em"><Settings24Regular/></Icon>
        </template>
      </NButton>
    </div>
    <div class="right" :style="{height: windowWidth < 768 ? 'auto' : (skyMapWidth + 'px'), width: rightWidth, flexGrow: rightGrow}">
      <SunTime :setting="setting" :scale="scale" />
      <div style=" width: 100%">
        <DateInfo :setting="setting"/>
      </div>
      <div class="rightBottom">
        <MoonPhase :setting="setting"/>
        <SolarSystem :setting="setting" :scale="scale"/>
      </div>
    </div>
  </div>
  <n-modal v-model:show="showSetting">
    <n-card
      style="width: 600px;"
      title="设置"
      :bordered="false"
      role="dialog"
      aria-modal="true"
    >
      <n-alert title="提示" type="info">
        星图恒星与日月位置误差较小，但行星位置误差较大（约几度），仅供参考。
        月相仅保证亮暗分布形状准确，不能确保月面位置准确。
        <br/>
        恒星数据来自 <a href="https://cdsarc.cds.unistra.fr/viz-bin/cat/I/239#/article" target="blank">The Hipparcos and Tycho Catalogues</a>，日月计算使用 <a href="https://github.com/mourner/suncalc" target="blank">SunCalc</a>，行星位置计算方法来自 <a href="https://aa.quae.nl/en/reken/hemelpositie.html" target="blank">Astronomy Answers</a>。
        <br/>
        设置的更新间隔越短，需要消耗的计算资源越多，可能会导致浏览器卡顿或崩溃。
        <br/>
        <br/>
        可以在 <a href="https://lbs.qq.com/getPoint/" target="_blank">腾讯位置服务</a> 中查询经纬度。所有计算都在本地浏览器完成，不会向外发送任何数据。
        <br/>
        <br/>
        页面时间数字的字体由 Lilidream 设计，版权归 Lilidream 所有，禁止在除此页面外的其他地方使用。
      </n-alert>

      <n-form label-placement="left" label-width="auto" style="margin-top: 2em;" :model="setting">
        <n-form-item label="所在经度" path="longitude">
          <n-input-number v-model:value="setting.longitude" :min="-180" :max="180" />
        </n-form-item>
        <n-form-item label="所在纬度" path="latitude">
          <n-input-number v-model:value="setting.latitude" :min="-90" :max="90" />
        </n-form-item>
        <n-form-item label="星图更新间隔（秒）" path="skyMapInterval">
          <n-input-number v-model:value="setting.skyMapInterval" :min="1" />
        </n-form-item>
        <n-form-item label="时钟更新间隔（秒）" path="clockInterval">
          <n-input-number v-model:value="setting.clockInterval" :min="0.1" :max="1" :step="0.1"/>
        </n-form-item>
        <n-form-item label="月相更新间隔（秒）" path="moonInterval">
          <n-input-number v-model:value="setting.moonInterval" :min="60"/>
        </n-form-item>
        <n-form-item label="太阳系更新间隔（秒）" path="solarSystemInterval">
          <n-input-number v-model:value="setting.solarSystemInterval" :min="60"/>
        </n-form-item>
        <n-form-item label="显示经纬度">
          <n-switch v-model:value="setting.showLonLat"/>
        </n-form-item>
      </n-form>
      <template #footer>
        <div style="display: flex; justify-content: flex-end">
          <n-button @click="showSetting = false">关闭</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
  </n-config-provider>
</template>
<script setup lang="ts">
import skymap from './components/SkyMap.vue';
import SunTime from './components/SunTime.vue';
import { ref, onMounted, watch } from 'vue';
import MoonPhase from './components/MoonPhase.vue';
import SolarSystem from './components/SolarSystem.vue';
import DateInfo from './components/DateInfo.vue';
import { NButton, NConfigProvider, NModal, NCard, NAlert, NForm, NFormItem, NInputNumber, NSwitch } from 'naive-ui';
import { Icon } from '@vicons/utils';
import { Settings24Regular } from '@vicons/fluent';
import { darkTheme } from 'naive-ui'


const longitude = 118.831086;
const latitude = 32.06467;
const windowWidth = document.documentElement.clientWidth;

const showSetting = ref(false);
const time = ref(new Date());

export interface Setting {
  longitude: number;
  latitude: number;
  skyMapInterval: number;
  clockInterval: number;
  showLonLat: boolean;
  moonInterval: number;
  solarSystemInterval: number;
}
const settingDefault = ref<Setting>({
  longitude: longitude,
  latitude: latitude,
  skyMapInterval: 10,
  clockInterval: 1,
  showLonLat: true,
  moonInterval: 3600,
  solarSystemInterval: 3600,
});
const setting = ref<Setting>(settingDefault.value);

// 保存读取 setting 到 localStorage
const saveSetting = () => {
  localStorage.setItem('setting', JSON.stringify(setting.value));
};

const loadSetting = () => {
  const savedSetting = localStorage.getItem('setting');
  if (savedSetting) {
    setting.value = JSON.parse(savedSetting);
  }
};

loadSetting();
saveSetting();

watch(setting, () => {
  saveSetting();
}, { deep: true });


// 缩放比例
const scale = ref(1);
const skyMapWidth = ref(600);
const rightWidth = ref('auto');
const rightGrow = ref(1);
// 根据屏幕宽度设置缩放比例
const setScale = () => {
  const width = document.documentElement.clientWidth;
  scale.value = width / 1920;
  const screenAspect = window.innerWidth / window.innerHeight;
  if (windowWidth < 768){
    skyMapWidth.value = windowWidth
    scale.value = 0.4;
    return;
  }
  if( screenAspect >= 16/9){
    // 宽屏，设置天空图的宽度
    skyMapWidth.value = window.innerHeight
    rightWidth.value = window.innerHeight * 7/9 + 'px'
    rightGrow.value = 0
  } else {
    // 窄屏，设置天空图的宽度
    skyMapWidth.value = window.innerWidth * 0.56;
    rightWidth.value = 'auto'
    rightGrow.value = 1
  }

};


onMounted(() => {
  setScale();
  window.addEventListener('resize', setScale);
});

</script>



<style scoped>
.page{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
.left{
  position: relative;
}
.settingButton{
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.right{
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.rightBottom{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .page{
    flex-direction: column;
    height: auto;
  }
  .right{
    width: 100%;
    height: fit-content;
  }
}

</style>
